<template>
  <div class="app">
    <div class="dingdan">
      <div class="dingdan1">
        <div class="dingleft">
          <span class="dinf">订单信息</span>
          <div class="leiji">
            <span>累计订单:{{carleng}}</span>
            <span>总消费:{{truePrice}}.00元</span>
          </div>
        </div>
        <img src="http://47.115.51.185/h5/img/orderTime.e95f9090.png" alt="" />
      </div>

      <van-tabs v-model="active">
        <van-tab title="待付款">
          <template #title> <span>待付款</span><span> 0</span> </template>
          <van-empty description="暂无订单信息" />
        </van-tab>
        <van-tab title="待发货">
           <template #title> <span>待发货</span><span>{{cartNU.length}}</span> </template>
          <van-empty v-if="cartNU.length == 0" description="暂无订单信息" />
          <div v-if="cartNU.length > 0">
            <ul class="shanul" >
              <li v-for='j in cartNU' :key='j.id'>
                <div class="weifahuo" >
                  <span>{{j._add_time}}</span>
                  <span>未发货</span>
                </div>
                <div class="fahuo" v-for="i in j.cartInfo" :key="i.id" >
                  <div class="top">
                    <img :src="i.productInfo.image" alt="" />
                    <span class="storne">{{ i.productInfo.store_name }}</span>
                    <div class="pic">
                      <span>￥{{ i.productInfo.price }}</span>
                      <span>X{{ i.cart_num }}</span>
                    </div>
                  </div>
                  <div class="shanjin">
                    <span
                      >共{{i.cart_num }}件商品,总金额<span class="jisuan"
                        >￥{{ i.productInfo.price * i.cart_num }}</span
                      ></span
                    >
                  </div>
                </div>
                <div class="dingdanxinxi">
                  <router-link :to="{
                    path:'/xiangqing',
                    query:{
                      xiang:j.order_id
                    }
                    }"><van-button type="danger" >查看详情</van-button></router-link>
                </div>
              </li>
            </ul>
          </div>

        </van-tab>
        <van-tab title="待收货" 
        ><template #title> <span>待收货</span><span> 0</span> </template>
          <van-empty description="暂无订单信息" />
        </van-tab>
        <van-tab title="待评价">
          <template #title> <span>待评价</span><span> 0</span> </template>
          <van-empty description="暂无订单信息" />
        </van-tab>
        <van-tab title="已完成">
          <template #title> <span>已完成</span><span> 0</span> </template>
          <van-empty description="暂无订单信息" />
        </van-tab>
      </van-tabs>
    </div>
    
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  name: "fahuo",
  data() {
    return {
      active: 0,
      cartNU: [],
      carleng:0,
      arr1:[]
    };
  },
  created() {
    this.active = parseInt(this.$route.query.title);
    //   console.log(this.$route.query.title)
    // this.cartNU = this.$store.state.shoumi;
    // console.log(this.cartNU);

    this.axios.get('http://47.115.51.185/api/order/list?page=1&limit=20&type=1').then(d=>{
        console.log(d)
        this.cartNU= d.data.data;
        console.log(this.cartNU);
        // for(let i in this.cartNU){
        //   this.arr1=this.cartNU[i].cartInfo;
        //   // console.log(arr)
        // }
        this.carleng=d.data.data.length;
    })
  },
  methods: {
    ...mapMutations(["addshou"]),
  },
  computed: {
    truePrice:function(){
       return this.cartNU.reduce((total, item) => {
          return total+parseInt(item.total_price);
        }, 0)
    }
  },
};
</script>
<style lang="less" scoped>
.app {
  width: 100vw;
  height: 100vh;
}
.div{
    width: 100vw;
  height: 100vh;
    z-index: -8;
    background-color: rgb(245, 245, 245);
}
.dingdan {
  height: 23vh;
  background-color: #e93323;
  .dingdan1 {
    padding: 2vh 5vw;
    display: flex;
    justify-content: space-between;
    .dingleft {
      .dinf {
        font-size: 19px;
        color: white;
        font-weight: 550;
      }
      .leiji {
        padding: 2vh 0vw;
        color: hsla(0, 0%, 100%, 0.8);
        font-size: 0.26rem;
        span {
          padding-left: 2vw;
        }
      }
    }
    img {
      height: 10vh;
      width: 20vw;
    }
  }
}

.shanul {
  padding-bottom: 3vh;
  li {
    margin-top: 1vh;
    background-color: white;
    border-radius: 5px;
    // background-color: rgb(245, 245, 245);
    border:1px solid #eee;
    .weifahuo {
      display: flex;
      justify-content: space-between;
      padding: 2vh 2vw;
      border-bottom: 1px solid #eee;
      span:nth-child(2) {
        color: red;
      }
    }
    .fahuo {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #eee;
      // &:first-child{
      //   border-bottom: 1px solid #eee;
      // }
      .top {
        display: flex;
        padding: 2vh 3vw;
        .storne {
          padding: 0px 3vw;
          flex: 1;
          display: block;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 20vw;
          white-space: nowrap;
          color: black;
        }
        .pic {
          display: flex;
          flex-direction: column;
          span {
            font-size: 14px;
            color: #999;
          }
          span:nth-child(2) {
            text-align: right;
          }
        }
      }
    }
    img {
      width: 16vw;
      height: 10vh;
    }
    .dingdanxinxi {
      text-align: right;
      padding: 2vh 3vw;
      .van-button {
        width: 25vw;
        height: 5vh;
        border-radius: 30px;
      }
    }
  }
}
.shanjin {
  padding: 0px 2vw;
  display: flex;
  justify-content: flex-end;
  // border-top: 1px solid #eee;
  .jisuan {
    color: red;
  }
}
</style>
<style lang="less">
.dingdan {
  .van-tabs {
    width: 90vw;
    margin-left: 3vh;
    text-align: center;
    .van-tabs__wrap {
      border-radius: 4px !important;
      .van-tabs__nav.van-tabs__nav--line{
        .van-tab{
          .van-tab__text.van-tab__text--ellipsis{
          span{
            padding-top: 0px;
          }
          }
        }
      }
    }
  }
}
.dingdan{
  .van-tab__text.van-tab__text--ellipsis{
    display: flex !important;
    flex-direction: column;
  }
}
</style>